  <template>
    <div class="display-search-div">
      <div class="header">
        <slot name="header"></slot>
      </div>
      <el-form :label-width="labelWidth" class="display-search-form">
        <el-row>
          <template v-for="item in searchProps" :key="item.label">
            <el-col v-bind="colLayout">
              <el-form-item
                v-if="!item.isHidden"
                :label="item.label"
                :rules="item.rules"
                :style="itemStyle"
              >
                <template
                  v-if="item.type === 'input' || item.type === 'password'"
                >
                  <el-input
                    :placeholder="item.placeholder"
                    v-bind="item.otherOptions"
                    :show-password="item.type === 'password'"
                    v-model="subModelValue[`${item.field}`]"
                    @keyup.enter="queryData"
                  />
                </template>
                <template v-else-if="item.type === 'select'">
                      <el-select
                      clearable
                      popper-class="detailselect"
                      :placeholder="item.placeholder"
                      v-bind="item.otherOptions"
                      style="width: 100%"
                      v-model="subModelValue[`${item.field}`]"
                    >
                      <el-option
                        v-for="option in codeCollection[`${item.field}`]||[]"
                        :key="option.value"
                        :value="option.value"
                        :label="option.title"
                        ></el-option
                      >
                    </el-select>
                  
                </template>
                <template v-else-if="item.type === 'datepicker'">
                  <el-date-picker
                    style="width: 100%"
                    v-bind="item.otherOptions"
                    v-model="subModelValue[`${item.field}`]"
                  ></el-date-picker>
                </template>
                <template v-else-if="item.type === 'cascader'">
                  <el-cascader :options="codeCollection[`${item.field}`]" v-bind="item.otherOptions" popper-class="mycascader" style="width: 100%" clearable
                  @change="item.onChange($event,subModelValue,codeCollection)" v-model="subModelValue[`${item.field}`]" :placeholder="item.placeholder" />
                </template>
              </el-form-item>
            </el-col>
          </template>
          <el-col v-bind="colLayout" class="searcharea">
            <el-form-item :style="itemStyle">
                <el-button type="primary" @click="queryData">
                  <el-icon>
                    <Search/>
                  </el-icon>查询
                </el-button>
                &nbsp;&nbsp;
                <el-button type="warning"  @click="resetQueryData">
                  <el-icon>
                    <RefreshLeft/> 
                  </el-icon> 重置
                </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </template>

  <script>
  import { watch,ref,computed, onMounted ,onBeforeMount} from "vue";
  import { Search, RefreshLeft } from '@element-plus/icons-vue'
  export default {
    components:{
      Search, RefreshLeft
    },
    props: {
        modelValue: {
            type: Object,
            required: true
        },
        searchProps: {
            type: Array,
            default: () => []
        },
        labelWidth: {
            type: String,
            default: '100px'
        },
        itemStyle: {
            type: Object,
            default: () => ({ padding: '10px 40px' })
        },
        colLayout: {
            type: Object,
            default: () => ({
                xl: 6,
                md: 12,
                sm: 24,
                xs: 24
            })
        },
        showSearch: {
            type: Boolean,
            required: false,
            default:()=>true
        }
    },
    emits: ['update:modelValue','queryData','resetQueryData'],
    setup(props, { emit }) {
    const codeCollection = ref({})
		const subModelValue = ref({})
        const queryData = () => {
		      	emit('update:modelValue', JSON.parse(JSON.stringify(subModelValue.value)))
            emit('queryData')
        }
        const resetQueryData = () => {
            subModelValue.value={}
            emit('resetQueryData')
        }
        const apendCode = async()=>{
          for (const item of props.searchProps) {
            if(item.type==='select'|| item.type === 'cascader'){
              let options = item.options
              if(options instanceof Array){
                codeCollection.value[`${item.field}`]= options
              }else if(typeof(options)==='function'){
                codeCollection.value[`${item.field}`] = await options() ||[]
              }
            }
          }
        }
        apendCode();
        return {
            queryData,
            resetQueryData,
			      subModelValue,
            codeCollection
        }
    }
  };
  </script>
  
  